// 全局变量
let currentPage = 1;
let pageSize = 10;
let totalItems = 0;
let filterParams = {
  keyword: '',
  role: '',
  status: '',
  mobile: ''
};

// 页面加载完成后初始化
$(document).ready(function() {
  // 初始化事件绑定
  initEvents();
  
  // 加载审核员列表
  loadAuditorList();


// 初始化所有事件绑定
function initEvents() {
  // 模态框相关事件
  bindModalEvents();
  
  // 筛选和搜索事件
  bindFilterEvents();
  
  // 分页事件
  bindPaginationEvents();
  
  // 表格操作事件
  bindTableActionEvents();
  
  // 表单相关事件
  $(document).ready(function() {
    bindFormEvents();
  });
}

// 模态框事件绑定
function bindModalEvents() {
  // 添加审核员按钮
  $('#addAuditorBtn').click(function() {
    $('#modalTitle').text('添加审核员');
    $('#auditorForm')[0].reset();
    $('#auditorId').val('');
    $('#passwordContainer').show();
    // 确保密码字段添加required属性
    $('#password').attr('required', true);
    $('#avatarPreview').attr('src', '/images/avatar-default.png');
    showModal('auditorModal');
  });
  
  // 取消按钮（添加/编辑模态框）
  $('#cancelBtn').click(function() {
    hideModal('auditorModal');
  });
  
  // 关闭权限模态框
  $('#closePermissionModal').click(function() {
    hideModal('rolePermissionModal');
  });
  
  // 取消确认按钮
  $('#cancelConfirmBtn').click(function() {
    hideModal('confirmModal');
  });
  
  // 确认操作按钮
  $('#confirmActionBtn').click(function() {
    const action = $('#confirmAction').val();
    const auditorId = $('#confirmAuditorId').val();
    
    if (action === 'disable') {
      disableAuditor(auditorId);
    }
    
    hideModal('confirmModal');
  });
}

// 筛选和搜索事件绑定
function bindFilterEvents() {
  // 搜索按钮
  $('#searchBtn').click(function() {
    filterParams.keyword = $('#searchKeyword').val().trim();
    filterParams.role = $('#roleFilter').val();
    filterParams.status = $('#statusFilter').val();
    filterParams.mobile = $('#mobileFilter').val().trim();
    currentPage = 1; // 重置到第一页
    loadAuditorList();
  });
  
  // 重置按钮
  $('#resetFilterBtn').click(function() {
    $('#searchKeyword').val('');
    $('#roleFilter').val('');
    $('#statusFilter').val('');
    $('#mobileFilter').val('');
    
    filterParams = {
      keyword: '',
      role: '',
      status: '',
      mobile: ''
    };
    
    currentPage = 1;
    loadAuditorList();
  });
}

// 分页事件绑定
function bindPaginationEvents() {
  // 每页显示条数变更
  $('#pageSizeSelect').change(function() {
    pageSize = parseInt($(this).val());
    currentPage = 1; // 重置到第一页
    loadAuditorList();
  });
  
  // 页码点击事件（通过事件委托）
  $('.flex.space-x-1').on('click', 'button:not([disabled])', function() {
    const text = $(this).text().trim();
    if (text === '<<') {
      // 上一页
      if (currentPage > 1) {
        currentPage--;
        loadAuditorList();
      }
    } else if (text === '>>') {
      // 下一页
      const totalPages = Math.ceil(totalItems / pageSize);
      if (currentPage < totalPages) {
        currentPage++;
        loadAuditorList();
      }
    } else {
      // 具体页码
      currentPage = parseInt(text);
      loadAuditorList();
    }
  });
}

// 表格操作事件绑定
function bindTableActionEvents() {
  // 编辑按钮
  $('#auditorTableBody').on('click', '.fa-edit', function() {
    const tr = $(this).closest('tr');
    const id = tr.find('td:first').text();
    editAuditor(id);
  });
  
  // 权限设置按钮
  $('#auditorTableBody').on('click', '.fa-key', function() {
    const tr = $(this).closest('tr');
    const id = tr.find('td:first').text();
    const name = tr.find('td:eq(3)').text();
    const username = tr.find('td:eq(2)').text();
    const avatar = tr.find('img').attr('src');
    showPermissionModal(id, name, username, avatar);
  });
  
  // 禁用按钮
  $('#auditorTableBody').on('click', '.fa-ban', function() {
    const tr = $(this).closest('tr');
    const id = tr.find('td:first').text();
    const name = tr.find('td:eq(3)').text();
    showConfirmModal('disable', id, `您确定要禁用审核员「${name}」吗？`);
  });
  
  // 批量导入按钮
  $('#batchImportBtn').click(function() {
    alert('批量导入功能即将上线，敬请期待！');
    // 实际项目中这里会处理文件上传逻辑
  });
}

// 表单相关事件绑定
function bindFormEvents() {
  // 审核员表单提交
  $('#auditorForm').submit(function(e) {
    e.preventDefault();
    saveAuditor();
  });
  
  // 密码显示/隐藏切换
  $('#togglePassword').click(function() {
    const passwordInput = $('#password');
    const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
    passwordInput.attr('type', type);
    $(this).find('i').toggleClass('fa-eye fa-eye-slash');
  });
  
  // 角色选择变更显示描述
  $('#roleSelect').change(function() {
    const selectedOption = $(this).find('option:selected');
    const desc = selectedOption.data('desc') || '';
    $('#roleDescription').text(desc);
  });
  
  // 头像上传预览
  $('#avatar').change(function(e) {
    const file = e.target.files[0];
    if (file) {
      // 验证文件类型和大小
      if (!isValidImageFile(file)) {
        alert('请上传JPG或PNG格式的图片，且文件大小不超过2MB');
        $(this).val(''); // 清空选择
        return;
      }
      
      const reader = new FileReader();
      reader.onload = function(event) {
        $('#avatarPreview').attr('src', event.target.result);
      };
      reader.readAsDataURL(file);
    }
  });

  // 选择图片按钮点击事件
  $('#selectAvatarBtn').click(function() {
    try {
      // 创建一个新的临时文件输入元素
      var tempInput = document.createElement('input');
      tempInput.type = 'file';
      tempInput.accept = 'image/jpeg,image/png';
      tempInput.style.display = 'none';
      document.body.appendChild(tempInput);
      
      // 监听文件选择事件
      tempInput.addEventListener('change', function(e) {
        // 将选择的文件传递给原有的头像文件输入元素
        var avatarInput = document.getElementById('avatar');
        if (avatarInput) {
          // 复制文件列表
          Object.defineProperty(avatarInput, 'files', {
            value: e.target.files
          });
          // 触发change事件，以便执行原有的预览逻辑
          var event = new Event('change');
          avatarInput.dispatchEvent(event);
        }
        // 移除临时元素
        document.body.removeChild(tempInput);
      });
      
      // 触发临时元素的点击事件
      tempInput.click();
    } catch (error) {
      console.error('触发头像选择对话框失败:', error);
    }
  });

  // 添加图片文件验证函数
function isValidImageFile(file) {
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png'];
  if (!allowedTypes.includes(file.type)) {
    return false;
  }
  
  // 验证文件大小（2MB）
  const maxSize = 2 * 1024 * 1024; // 2MB
  if (file.size > maxSize) {
    return false;
  }
  
  return true;
}
  
  
  // 保存权限设置
  $('#savePermissionBtn').click(function() {
    savePermissionSettings();
  });
}

// 显示模态框
function showModal(modalId) {
  const modal = $(`#${modalId}`);
  const modalContent = $(`#${modalId}Content`);
  
  modal.removeClass('hidden').addClass('flex');
  setTimeout(() => {
    modalContent.removeClass('scale-95 opacity-0').addClass('scale-100 opacity-100');
  }, 10);
}

// 隐藏模态框
function hideModal(modalId) {
  const modal = $(`#${modalId}`);
  const modalContent = $(`#${modalId}Content`);
  
  modalContent.removeClass('scale-100 opacity-100').addClass('scale-95 opacity-0');
  setTimeout(() => {
    modal.removeClass('flex').addClass('hidden');
  }, 300);
}

// 初始化举报列表
    function loadAuditorList() {
        // 显示加载中状态
        $('#auditorTableBody').html('<tr><td colspan="9" class="text-center py-4">加载中...</td></tr>');
        
        // 获取筛选参数
        const params = getFilterParams();
        
        // 调用后端接口获取数据
        fetchAuditorList(params)
            .then(result => {
                renderAuditorTable(result.data.list);
                renderPagination(result.data.total, currentPage, pageSize);
            })
            .catch(error => {
                // console.error('加载数据失败:', error);
                $('#auditorTableBody').html('<tr><td colspan="9" class="text-center py-4 text-danger">加载数据失败，请重试</td></tr>');
            });
    }
    /**
     * 渲染分页控件
     * @param {number} total - 总记录数
     * @param {number} currentPage - 当前页码
     * @param {number} pageSize - 每页条数
     */
    function renderPagination(total, currentPage, pageSize) {
        const totalPages = Math.ceil(total / pageSize);
        const paginationContainer = $('#auditorPagination'); // 分页容器
        
        // 清空现有分页
        paginationContainer.empty();
        
        // 上一页按钮
        const prevDisabled = currentPage === 1 ? 'disabled' : '';
        paginationContainer.append(`
            <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50 pagination-btn" 
                    data-page="${currentPage - 1}" ${prevDisabled}>
                <i class="fa fa-angle-left"></i>
            </button>
        `);
        
        // 页码按钮（最多显示5个页码）
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(totalPages, startPage + 4);
        
        // 调整显示范围
        if (endPage - startPage < 4 && totalPages > 5) {
            startPage = Math.max(1, endPage - 4);
        }
        
        for (let i = startPage; i <= endPage; i++) {
            const isActive = i === currentPage ? 'border-primary bg-primary text-white' : 'border-neutral-200 text-neutral-700 hover:border-primary hover:text-primary';
            paginationContainer.append(`
                <button class="w-8 h-8 flex items-center justify-center rounded ${isActive} pagination-btn" data-page="${i}">
                    ${i}
                </button>
            `);
        }
        
        // 下一页按钮
        const nextDisabled = currentPage === totalPages ? 'disabled' : '';
        paginationContainer.append(`
            <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50 pagination-btn" 
                    data-page="${currentPage + 1}" ${nextDisabled}>
                <i class="fa fa-angle-right"></i>
            </button>
        `);
        
        // 更新分页信息
        const start = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
        const end = Math.min(currentPage * pageSize, total);
        $('.pagenation').text(`显示 ${start} 至 ${end} 条，共 ${total} 条`);
    }
    /**
     * 获取筛选参数
     */
    function getFilterParams() {
        return {
            page: currentPage,
            pageSize: pageSize,
            role: $('#roleFilter').val(),
            status: $('#statusFilter').val(),
            mobile: $('#mobileFilter').val(),
            keyword: $('#searchKeyword').val().trim(),
        };
    }

    /**
     * 获取举报列表
     * @param {*} params 
     * @returns 
     * */
    async function fetchAuditorList(params) {
        try {
            // 构建查询字符串
            const queryParams = new URLSearchParams();
            Object.entries(params).forEach(([key, value]) => {
                if (value !== undefined && value !== null && value !== '') {
                    queryParams.append(key, value);
                }
            });

            // 发起请求
            const response = await fetch(`/system/GetAuditorList?${queryParams.toString()}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    // 根据实际需求添加认证信息
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                }
            });
            if (response.status/1 != 200) {
                throw new Error(`请求失败: ${response.statusText}`);
            }

            const data = await response.json();
            return data;
        } catch (error) {
            showToast(error.message || '获取媒体内容列表失败');
        }
    }



// 渲染审核员表格
function renderAuditorTable(data) {
  const tbody = $('#auditorTableBody');
  tbody.empty();
  
  if (data.length === 0) {
    tbody.append(`
      <tr>
        <td colspan="9" class="px-5 py-10 text-center text-neutral-500">
          <i class="fa fa-search-minus mr-2"></i>未找到匹配的审核员
        </td>
      </tr>
    `);
    return;
  }
  
  data.forEach(item => {
    // 角色标签样式
    let roleClass = '';
    if (item.role === 1) roleClass = 'bg-blue-100 text-blue-800';
    else if (item.role === 2) roleClass = 'bg-purple-100 text-purple-800';
    else roleClass = 'bg-green-100 text-green-800';
    const statusText = item.status/1 === 1 ? '启用' : '禁用';
    // 状态标签样式
    const statusClass = item.status/1 === 1 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
    
    // 操作按钮（系统管理员不可禁用）
    const actionButtons = item.id === 1 ? `
      <div class="flex space-x-3">
        <button class="text-blue-600 hover:text-blue-900 transition-colors" title="编辑">
          <i class="fa fa-edit"></i>
        </button>
        <button class="text-purple-600 hover:text-purple-900 transition-colors" title="权限设置">
          <i class="fa fa-key"></i>
        </button>
        <button class="text-neutral-300 cursor-not-allowed" title="不可禁用系统管理员">
          <i class="fa fa-ban"></i>
        </button>
      </div>
    ` : `
      <div class="flex space-x-3">
        <button class="text-blue-600 hover:text-blue-900 transition-colors" title="编辑">
          <i class="fa fa-edit"></i>
        </button>
        <button class="text-purple-600 hover:text-purple-900 transition-colors" title="权限设置">
          <i class="fa fa-key"></i>
        </button>
        <button class="text-red-600 hover:text-red-900 transition-colors" title="${item.status === 1 ? '禁用' : '启用'}">
          <i class="fa fa-ban"></i>
        </button>
      </div>
    `;
    
    tbody.append(`
      <tr class="hover:bg-neutral-50 transition-colors">
        <td class="px-5 py-4 whitespace-nowrap text-sm text-neutral-800">${item.id}</td>
        <td class="px-5 py-4 whitespace-nowrap">
          <img src="/i/avatar/${item.avatar}" alt="头像" class="w-8 h-8 rounded-full object-cover border border-neutral-200">
        </td>
        <td class="px-5 py-4 whitespace-nowrap text-sm text-neutral-800">${item.username}</td>
        <td class="px-5 py-4 whitespace-nowrap text-sm text-neutral-800">${item.real_name}</td>
        <td class="px-5 py-4 whitespace-nowrap text-sm text-neutral-800">${item.mobile}</td>
        <td class="px-5 py-4 whitespace-nowrap text-sm">
          <span class="px-2 py-1 rounded-full text-xs ${roleClass}">${item.role_name}</span>
        </td>
        <td class="px-5 py-4 whitespace-nowrap text-sm">
          <span class="px-2 py-1 rounded-full text-xs ${statusClass}">${statusText}</span>
        </td>
        <td class="px-5 py-4 whitespace-nowrap text-sm text-neutral-600">${item.last_login_time}</td>
        <td class="px-5 py-4 whitespace-nowrap text-sm font-medium">
          ${actionButtons}
        </td>
      </tr>
    `);
  });
}

/**
     * 获取审核员详情
     * @returns {Promise}
     */
    async function getAuditor(id) {
        try {
            let url = '';

            url = '/system/GetAuditorDetail?id='+id;

            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                }
            });

            const result = await response.json();
            
            if (!response.ok || result.status/1 !== 0) {
                throw new Error(result.msg || `操作失败: ${response.statusText}`);
            }
            
            return result.data;
        } catch (error) {
            throw error; // 抛出错误给调用方处理
        }
    }
// 编辑审核员
function editAuditor(id) {

  getAuditor(id).then(data => {
    $('#modalTitle').text('编辑审核员');
    $('#auditorId').val(data.id);
    $('#username').val(data.username).prop('readonly', true); // 用户名通常不可修改
    $('#realName').val(data.real_name);
    $('#mobile').val(data.mobile);
    $('#roleSelect').val(data.role);
    $('#statusSelect').val(data.status);
    $('#avatarPreview').attr('src', data.avatar);
    
    // 隐藏密码框并移除required属性
    $('#passwordContainer').hide();
    $('#password').removeAttr('required');
    
    // 触发角色描述更新
    $('#roleSelect').trigger('change');
    
    // 显示模态框
    showModal('auditorModal');
  }).catch(error => {
    console.error('获取审核员详情失败:', error);
  });


  
}

// 保存审核员（添加或编辑）
function saveAuditor() {
  const id = $('#auditorId').val();
  const isEdit = !!id;
  // 尝试使用原生JavaScript获取
  const usernameInput = document.getElementById('username');
  
  
  // 尝试多种方式获取用户名
  let username = '';
  if (usernameInput && 'value' in usernameInput) {
    username = usernameInput.value.trim();
  } else if (usernameInput) {
    // 如果不是标准输入元素，尝试使用textContent
    username = usernameInput.textContent.trim();
  }
  
  // 尝试使用jQuery的val()方法
  const jqueryUsername = $('#username').val().trim();
  
  // 如果上述方法都失败，尝试使用data属性
  const dataUsername = $('#username').data('value') || '';
  
  // 最终确定使用的用户名为非空值
  username = username || jqueryUsername || dataUsername;
  
  const realName = $('#realName').val().trim();
  const role = $('#roleSelect').val();
  const status = $('#statusSelect').val();
  
  // 尝试直接设置值然后立即获取
  if (usernameInput) {
    if ('value' in usernameInput) {
      usernameInput.value = 'test_value';
    } else {
      usernameInput.textContent = 'test_value';
      // 同时更新data属性
      $('#username').data('value', 'test_value');
    }
  }
  if (!username) {
    showToast('请输入用户名', 'error');
    return;
  }
  
  if (!realName) {
    showToast('请输入真实姓名', 'error');
    return;
  }
  
  if (!role) {
    showToast('请选择角色', 'error');
    return;
  }
  
  if (!status) {
    showToast('请选择状态', 'error');
    return;
  }
  
  // 密码验证（仅添加时）
  if (!isEdit) {
    const password = $('#password').val();
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
    if (!passwordRegex.test(password)) {
      showToast('密码长度至少8位，且必须包含字母和数字', 'error');
      return;
    }
  }

  // 处理头像文件（如果有选择新头像）
  const avatarFile = $('#avatar')[0].files[0];
  let formData = new FormData();
  
  // 添加表单字段
  formData.append('id', id);
  formData.append('username', username);
  formData.append('realName', realName);
  formData.append('mobile', $('#mobile').val().trim());
  formData.append('role', role);
  formData.append('status', status);
  
  // 如果有选择新头像，添加到表单数据
  if (avatarFile) {
    formData.append('avatar', avatarFile);
  }
  
  // 如果是添加操作，添加密码字段
  if (!isEdit) {
    formData.append('password', $('#password').val());
  }
  
  // 替换模拟请求部分
  $.ajax({
    url: isEdit ? '/system/EditAuditor' : '/system/AddAuditor',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      hideModal('auditorModal');
      showToast(isEdit ? '审核员更新成功' : '审核员添加成功', 'success');
      loadAuditorList();
    },
    error: function() {
      showToast('操作失败，请重试', 'error');
    }
  });
}

// 显示权限设置模态框
function showPermissionModal(id, name, username, avatar) {
  // 填充数据
  $('#permissionAuditorId').val(id);
  $('#permissionAuditorName').text(`${name} (${username})`);
  $('#permissionAuditorAvatar').attr('src', avatar);
  
  // 模拟API请求获取权限信息
  setTimeout(() => {
    // 这里可以根据实际角色设置权限勾选状态
    showModal('rolePermissionModal');
  }, 300);
}

// 保存权限设置
function savePermissionSettings() {
  const auditorId = $('#permissionAuditorId').val();
  const role = $('#permissionRoleSelect').val();
  
  // 收集选中的权限
  const permissions = [];
  $('input[type="checkbox"]:checked').each(function() {
    permissions.push($(this).attr('id'));
  });
  
  // 模拟API请求
  setTimeout(() => {
    hideModal('rolePermissionModal');
    alert('权限设置保存成功');
    loadAuditorList(); // 重新加载列表
  }, 500);
}

// 显示确认模态框
function showConfirmModal(action, id, message) {
  $('#confirmAction').val(action);
  $('#confirmAuditorId').val(id);
  $('#confirmMessage').text(message);
  showModal('confirmModal');
}

// 禁用审核员
function disableAuditor(id) {
  // 模拟API请求
  setTimeout(() => {
    alert('审核员已禁用');
    loadAuditorList(); // 重新加载列表
  }, 500);
}
// 分页按钮点击事件
$(document).on('click', '.pagination-btn', function() {
    const page = parseInt($(this).data('page'));
    if (!isNaN(page) && page !== currentPage) {
        currentPage = page;
        initReportList()
    }
});
});